<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner" /> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属公司">
        <el-select v-model="formInline.gongsiSel" @change="initData" placeholder="所属公司">
          <el-option v-for="val in gongsiList" :key="val.id" :label="val.name" :value="val.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              商品售出品类数
            </div>
            <count-to :start-val="0" :end-val="productObj.saleCategoryCount" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              商品售出总数
            </div>
            <count-to :start-val="0" :end-val="productObj.saleCount" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" >
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              商品售出总金额
            </div>
            <count-to :start-val="0" :end-val="productObj.saleAmount" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" >
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              商品动销率
            </div>
            <!-- <count-to :start-val="0" :end-val="productObj.saleRatio" :duration="3200" class="card-panel-num" /> -->
            <div style="font-size: 20px;">{{productObj.saleRatio.toFixed(2)+'%'}}</div>
          </div>
        </div>
      </el-col>
    </el-row>    
    <div style="margin-bottom: 40px;">
      <el-date-picker
        style="margin-top: 30px;"
        v-model="productDate"
        type="daterange"
        @change="getTrend"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;margin-top: 20px;">
      <!-- <line-chart :chart-data="lineChartData" /> -->
      <div v-if="lineChartData1.length>0" style="width:100%;height: 400px;" id="main" ref="chart"></div>
    </el-row>
    <el-table :data="productTableData" style="width: 100%">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="商品售价"></el-table-column>
      <el-table-column prop="amount" label="商品售出金额"></el-table-column>
      <el-table-column prop="count" label="商品售出数量"></el-table-column>
      <el-table-column prop="avgPrice" label="商品销售均价"></el-table-column>
    </el-table>
    <Pagination v-if="total>0" :total="total" :page="page+1" @pagination="pagination" />
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import { postCommodityFind,postCommoditySummary,postCommodityTrend } from '@/api/Operation'
import CountTo from 'vue-count-to'
import * as echarts from 'echarts';
import Pagination from '@/components/Pagination/index'

const lineChartData = {
        newVisitis: {
          expectedData: [],
          // actualData: [120, 82, 91, 154, 162, 140, 145]
        },
  // messages: {
  //   expectedData: [200, 192, 120, 144, 160, 130, 140],
  //   actualData: [180, 160, 151, 106, 145, 150, 130]
  // },
  // purchases: {
  //   expectedData: [80, 100, 121, 104, 105, 90, 100],
  //   actualData: [120, 90, 100, 138, 142, 130, 130]
  // },
  // shoppings: {
  //   expectedData: [130, 140, 141, 142, 145, 150, 160],
  //   actualData: [120, 82, 91, 154, 162, 140, 130]
  // }
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    CountTo,
    BoxCard,
    Pagination
  },
  data() {
    return {
      productDate:[],
      lineChartData: lineChartData.newVisitis,
      allDate: '',
      formInline: {
        gongsiSel: ''
      },
      gongsiList:[],
      productObj:{},
      productTableData:[],
      lineChartData1:[],
      lineChartData2:[],
      page: 0,
      total: 0,
    }
  },
  created() {
    this.gongsiList = JSON.parse(localStorage.getItem('companyList'));
    this.formInline.gongsiSel = this.gongsiList[0].id;
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    this.productDate = [start,end]; 
    this.initData();
  },
  methods: {     
    //分页
    pagination(data) {
      this.page = data-1;      
      var list = {
        "page": 0,
          "pageCount": 10,
          "searchCriteria": {
            "tenantId": this.formInline.gongsiSel,
          }
      }
      postCommodityFind(list).then((res)=>{
        this.productTableData = res.result.data;
        this.total = res.result.totalCount;
      })
    }, 
    echartInit(){
      var chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      var option;

      option = {
          title: {
            text: '商品日动销率趋势'
          },
          xAxis: {
              type: 'category',
              data: this.lineChartData1
          },
          yAxis: {
              type: 'value'
          },        
          series: [
              {
                  name: '面积模式',
                  width: '360px',
                  height: '540px',
                  top: '-46px',
                  left: '36px',
                  legendHoverLink: true,
                  stillShowZeroSum: true,
                  type: 'line',
                  center: ['50%', '50%'],
                  data: this.lineChartData2
              }
          ]
      };
      option && this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    initData(){
      postCommoditySummary(this.formInline.gongsiSel,{"page": 0, "pageCount": 10}).then((res)=>{
        this.productObj = res.result;
      })
      var list = {
        "page": 0,
          "pageCount": 10,
          "searchCriteria": {
            "tenantId": this.formInline.gongsiSel,
          }
      }
      postCommodityFind(list).then((res)=>{
        this.productTableData = res.result.data;
        this.total = res.result.totalCount;
      })
      this.getTrend();
    },
    getTrend() {
      postCommodityTrend({
        "tenantId": this.formInline.gongsiSel,
        "startDate": this.productDate[0],
        "endDate": this.productDate[1]
      }).then((res)=>{
        if(res.result.length>0){
          for(let i=0;i<res.result.length;i++){
            this.lineChartData1.push(res.result[i].date)
            this.lineChartData2.push(res.result[i].ratio)
          }
          setTimeout(()=>{
            this.echartInit();
          },1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 10px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }

    .card-panel-description2 {
      
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      margin-left: 110px;

      .card-panel-text {
        line-height: 52px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 22px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
.dashboard-editor-container {
  padding: 16px 32px;
  // background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .time{
    width: 100%;
    height: 36px;
    background: #fff;
    >div{
      float: right;
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
